﻿
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Rose Paradise</title>

    <link rel="stylesheet" type="text/css" href="../css/ext-all.css" />
  <link rel="stylesheet" type="text/css" href="../css/portal.css" />
 
   
  <script type="text/javascript" src="../js/ext/ext-base.js"></script>
  <script type="text/javascript" src="../js/ext/ext-all-debug.js"></script>
  <script type="text/javascript" src="../js/portal/Portal.js"></script>
  <script type="text/javascript" src="../js/portal/PortalColumn.js"></script>
  <script type="text/javascript" src="../js/portal/Portlet.js"></script>   
  
 <script type="text/javascript">
  
Ext.onReady(function(){
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    // create some portlet tools using built in Ext tool ids
    var closetool = {
        id:'close',
        handler: function(e, target, panel){
            panel.ownerCt.remove(panel, true);
        }
    };
    
 var geartool = {
        id:'gear',
        handler: function(){
            Ext.Msg.alert('Message', 'The Settings tool was clicked.');
        }
    };
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            xtype:'portal',
            id:'portalX',
            region:'center',
            autoScroll:true,
            
            margins:'99 -2 -2 0',
            items:[{
              
                columnWidth:.33,
                style:'padding:10px 0 10px 10px',
                items:[{
                  style:'opacity:0.8',
                    title: 'Member Introduction 1',
                    id:'portalcol1',
                    tools: [geartool,closetool],
                    draggable:false,
                    
                    html: Ext.example.shortBogusMarkup
                },{
                  style:'opacity:0.8',
                    title: 'Member Introduction 2',
                    tools: [closetool],
                    draggable:false,
                    html: Ext.example.shortBogusMarkup
                },{
                    title: 'Member Introduction 3',
                    style:'opacity:0.8',
                    tools: [closetool],
                    draggable:[closetool],
                    html: Ext.example.shortBogusMarkup
                }]
            },{
                columnWidth:.33,
                style:'padding:10px 0 10px 15px',
                items:[{
                    title: 'Designs',                  
                    layout:'fit',
                    draggable:false,
                    tools: [geartool],
                    items: new SampleGrid([0, 2, 3])
                },{
                  style:'opacity:0.8',
                    title: 'Q & A',
                    id:"styleTest",
                    tools: [geartool],
                    html: Ext.example.shortBogusMarkup
                },{
                  style:'opacity:0.8;height:600',
                    title: 'Blog',
                    tools: [geartool],
                    html: Ext.example.shortBogusMarkup
                }]
            },{
                columnWidth:.32,
                style:'padding:10px 0 10px 15px',
                items:[{
                  style:'opacity:0.8',
                    title: 'Notice',
                    tools: [geartool],
                    html: Ext.example.shortBogusMarkup
                },{
                  style:'opacity:0.8',
                    title: 'AD',
                    tools: [closetool],
                    html: Ext.example.shortBogusMarkup
                },{
                  style:'opacity:0.8',
                    title: 'Another AD',
                    tools: [closetool],
                    html: Ext.example.shortBogusMarkup
                }]
            }]
            
            /*
             * Uncomment this block to test handling of the drop event. You could use this
             * to save portlet position state for example. The event arg e is the custom 
             * event defined in Ext.ux.Portal.DropZone.
             */
//            ,listeners: {
//                'drop': function(e){
//                    Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + 
//                        e.columnIndex + '<br />Position: ' + e.position);
//                }
//            }
        }/*,{            
            id:'bottombox',
            title:'Bottom',      
            
            xtype:'container',
            region:'south',
            margins:'5 0 5 5',
            items: [{
                html: Ext.example.shortBogusMarkup,
                title:'Navigation',
                border:true               
            }]
        }*/]
    });
    //var test=Ext.get("portalX").setStyle("width","1380");
   //test.addListener("drag",function(){this.setStyle('opacity',0.8);});
   //.on('expand',function(){alert("dragend");this.setStyle('opacity',0.8);});
     var portalWrap = Ext.getBody().child(".x-portal div.x-column-layout-ct",false).setStyle("overflow-x","hidden");
     //portalcol1.setStyle("scrollbar-highlight-color","#FAFAFA");
     portalWrap.child("div.x-column-inner",false).setStyle("width","1416"); 
    // var classN = portalcol1.findParentNode("div",1,false); 
   //var classN = portalcol1.child("div",1,false); 
   //alert(classN.className); 
   //alert(classN);
});

 </script>
 <script type="text/javascript" src="../js/sample-grid.js"></script>
 <style type="text/css">
  #west-panel{ display:none;}
  #bottombox{display:none;}
 </style>
</head>
<body>
<script type="text/javascript" src="../js/examples.js">
 
</script> 
</body>
</html>